<template>
  <el-dialog
    title="裁剪图片"
    :visible="show"
    :size="width?width:'40%'"
    :append-to-body="true"
    @close="close"
  >
    <div style="margin-top:-10px;margin-bottom:10px;">
      <el-radio-group v-model="cropperType" @change="changeCropperType">
        <el-radio :label="1">裁剪比例1:1</el-radio>
        <el-radio :label="2">不限制比例</el-radio>
      </el-radio-group>
    </div>
    <div class="contentImage rowFlex columnCenter spaceAround">
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :output-size="option.size"
          :output-type="option.outputType"
          :info="true"
          :full="option.full"
          :fixed="option.fixed"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          :high="option.high"
          :img="file.url"
          @real-time="realTime"
          @imgLoad="imgLoad"
        >
        </vue-cropper>
      </div>
      <div class="preview">
        <p>预览</p>
        <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden', 'margin': '5px'}">
          <div :style="previews.div">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </div>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button class="btn" @click="close">取 消</el-button>
      <el-button class="btn" type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  props: ['show', 'width', 'title', 'file'],
  data() {
    return {
      option: {
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        canMove: false, // 固定截图框大小 不允许改变
        canMoveBox: true, // 截图框能否拖动
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixed: true,
        fixedNumber: [1, 1],
        fixedBox: false, // 是否开启截图框宽高固定比例
        full: false, // 是否输出原图比例的截图
        original: false, // 上传图片按照原始比例渲染
        high: true, // 是否按照设备的dpr 输出等比例图片
        centerBox: true // 截图框是否被限制在图片里面
      },
      cropperType: 1,
      previews: ''
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        console.log('显示弹窗')
      }
    }
  },
  mounted() {
  },
  methods: {
    changeCropperType(data) {
      if (data == 1) {
        this.option.fixed = true
      } else {
        this.option.fixed = false
      }
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {
        type: mime
      })
    },
    realTime(data) {
      this.previews = data
    },
    imgLoad (msg) {
    },
    close() {
      this.$emit('update:show', false)
    },
    submit() {
      this.$refs.cropper.getCropData((data) => {
        const info = this.dataURLtoFile(data, this.file.name)
        this.$emit('confirm', info)
      })
    }
  }
}
</script>

  <style lang="scss" scoped>

  ::v-deep .el-drawer{
    height: 100%;
    overflow: auto;
  }
  .contentImage{
      width: 100%;
      height: 300px;
      margin-bottom: 80px;
      overflow: hidden;
      .cropper{
        width: 50%;
        height: 100%;
        border-radius: 4px;
      }
      .preview{
        width: calc(50% - 20px);
        height: 100%;
        margin-left: 20px;
        border-radius: 10px;
      }
  }

  .dialog-footer{
    width: calc(100% - 20px);
    height: 52px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    justify-content: flex-end;
    background: #fff;

    .btn{
      width:84px ;
      height: 32px;
    }
  }
  </style>

